<template>
	<view class="body" :class="{nobody:isVip==false}">
		<view class="background-image">
			<view class="fixedbox">
				<image class="bg" src="http://img.curiousmore.com/tmp/wx2f4eaeb7b745ba4e.o6zAJs2bel8UMMafp-gtnT7OfHzo.MbnTEnikWqPN47b36d29885799816e6230755e5a108f.png"
				 mode=""></image>
				<view class="head">
					<view class="head_left1" @tap="back()">
						<image src="../../../static/wode/return1.png" mode=""></image>
						<text>返回</text>
					</view>
					<text>我的会员</text>
					<text class="head_right1" @tap="toMingxi">交易记录</text>
				</view>
				<view class="card">
					<image class="card_bg" src="http://img.curiousmore.com/tmp/wx2f4eaeb7b745ba4e.o6zAJs2bel8UMMafp-gtnT7OfHzo.b7UpwMPfWtRTff7cd81000d3ba04122df30bbcd86735.png"
					 mode=""></image>
					<view class="card_top">
						<view class="card_img">
							<image class="headImg" :src="myInfo.avatar" mode=""></image>
							<image class="huiyuan" src="../../../static/wode/huiyuan.png" mode="" v-if="member_level==1"></image>
							<image class="huiyuan" src="../../../static/wode/baijinhuiyuan.png" mode="" v-else-if="member_level==2"></image>
							<image class="huiyuan" src="../../../static/wode/zuanshihuiyuan.png" mode="" v-else-if="member_level==3"></image>
							<image class="huiyuan" src="../../../static/wode/huiyuan2.png" mode="" v-else></image>
						</view>
						<view class="card_top_right">
							<text class="nickname">
								{{myInfo.nick_name}}
							</text>
							<view v-if="isVip==true" class="huiyuanBtn">
								<text v-if="member_level==1">畅聊会员</text>
								<image src="/static/wode/baijinbg.png" v-else-if="member_level==2"></image>
								<image src="/static/wode/zuanshibg.png" v-else-if="member_level==3"></image>
							</view>
							<image v-else class="huiyuanbtn2" src="../../../static/wode/notvip.png" mode=""></image>
						</view>

					</view>
					<view class="card_bottom">
						<view class="information">
							<text>{{vipData.end_time}}</text>到期
						</view>
						<view class="renew" @tap="renewVip">
							立即续费
						</view>
					</view>
				</view>
			</view>

			<view class="body_mid" v-if="isVip">
				<view class="mid_title">
					<image v-if="member_level==1" src="../../../static/wode/huiyuan.png" mode=""></image>
					<image v-else-if="member_level==2" src="../../../static/wode/baijinhuiyuan.png" mode=""></image>
					<image v-else-if="member_level==3" src="../../../static/wode/zuanshihuiyuan.png" mode=""></image>
					<text>我的会员权限</text>
				</view>
				<view class="mid_body">
					<view class="mid_body_list">
						<view class="mid_body_item" v-for="(item,index) in quanyiList1" :key="index">
							<image class="quanxian_bg" src="/static/wode/vipsmallbg1.png" mode=""></image>
							<image :src="item.icon" mode=""></image>
							<text class="mid_body_item_title">{{item.title}}</text>
							<text>{{item.text}}</text>
						</view>
					</view>
					<view class="mid_body_list">
						<view class="mid_body_item" v-for="(item,index) in quanyiList2" :key="index">
							<image class="quanxian_bg" src="/static/wode/vipsmallbg1.png" mode=""></image>
							<image :src="item.icon" mode=""></image>
							<text class="mid_body_item_title">{{item.title}}</text>
							<text>{{item.text}}</text>
						</view>
					</view>
				</view>

			</view>
			<view class="body_mid2" v-else>
				<view class="noSupport" v-if="platform=='ios'">
					ios暂不支持开通会员
				</view>
				<view class="" v-else>
					<text class="mid2_title">选择套餐</text>
					<scroll-view class="scroll-box" scroll-x>
						<view class="padding-scroll-box">
							<view class="vip-item" v-for="(item,index) in taocanList1" :key="index">
								<view class="vip-item-title">
									<text>{{item.member_name}}</text>
									<view class="vip-item-title2">
										会员测试期，购买<text>{{item.discount}}折起</text>
									</view>
								</view>
								<!-- <view class="priceList">
								<view class="priceList-left">
									<text class="priceList-left-text1">一周</text>
									<text class="priceList-left-text2">¥20</text>
									<text class="priceList-left-text3">¥39</text>
								</view>
								<image class="selectone" v-if="select==true" src="/static/index/theselected.png" mode=""></image>
								<image class="selectone" v-else src="/static/index/uncheck.png" mode=""></image>
							</view> -->
								<view class="priceList" v-for="(item1,index1) in item.cardEntityList" :key="index1">
									<view class="priceList-left">
										<text class="priceList-left-text1">{{item1.member_name}}</text>
										<text class="priceList-left-text2">¥{{item1.discount_amout}}</text>
										<text class="priceList-left-text3">¥{{item1.amount}}</text>
										<view class="zhekouBox">
											{{item1.discount}}折
										</view>
									</view>

									<image class="selectone" v-if="item1.select==true" src="/static/index/theselected.png" mode="" @tap="selectVip(index,index1)"></image>
									<image class="selectone" v-else src="/static/index/uncheck.png" mode="" @tap="selectVip(index,index1)"></image>
								</view>

								<view class="vip-item-bottom">
									<text>权益说明</text>
									<text class="bottom-text" v-for="(item2,index2) in item.member_equity" :key="index2">・{{item2}}</text>
								</view>
							</view>
						</view>

					</scroll-view>
					<view class="btn btn1" @tap="openVip" v-if="vipIsCheck==true">
						立即支付{{money}}元
					</view>
				</view>

			</view>
		</view>
		<view v-show="isVip" class="changbtn" @tap="toTaocan">
			更多套餐
		</view>
		<!-- <view class="paybox" v-if="isShow">
			<view class="paybox_title">确认付款</view>
			<view class="paybox_num">
				￥<text>{{money}}.00</text>
			</view>
			<view class="pay_mode">
				<view class="pay_mode_title">支付方式</view>
				<view class="pay_mode_item" @tap="checkZhifu">
					<view class="mode_item_left">
						<image src="../../../static/wode/zhifu.png" mode=""></image>
						<text>支付宝支付</text>
					</view>
					<image v-if="iszhifu" class="mode_item_right" src="../../../static/wode/xuanze1.png" mode=""></image>
					<image v-else class="mode_item_right" src="../../../static/wode/xuanze.png" mode=""></image>
				</view>
				<view class="pay_mode_item" @tap="checkWeixin">
					<view class="mode_item_left">
						<image src="../../../static/wode/weixin.png" mode=""></image>
						<text>微信支付</text>
					</view>
					<image v-if="isweixin" class="mode_item_right" src="../../../static/wode/xuanze1.png" mode=""></image>
					<image v-else class="mode_item_right" src="../../../static/wode/xuanze.png" mode=""></image>
				</view>
				<view class="check" @tap="check">
					<image v-if="ischeck" src="../../../static/index/theselected.png" mode=""></image>
					<image v-else src="../../../static/index/uncheck.png" mode=""></image>
					<text>我已经阅读并同意《充值协议》</text>
				</view>
				<view class="btn shurepay" v-if="ischeck" @tap="toPay">
					确认充值
				</view>
				<view class="btn mask-btn" v-else>
					确认充值
				</view>
			</view>
		</view> -->
		<mask :isShowMask='isShowMask' @closeMask='closeMask'></mask>
	</view>
</template>

<script>
	import mask from '../../../components/mask.vue'
	export default {
		components: {
			mask
		},
		data() {
			return {
				platform: '', //平台
				taocanList1: [],
				quanyiList1: [{
					bgurl: '/static/wode/vipsmallbg1.png',
					icon: '/static/wode/w-quanyi1.png',
					title: '身份标识',
					text: ''
				}, {
					bgurl: '/static/wode/vipsmallbg1.png',
					icon: '/static/wode/w-quanyi2.png',
					title: '财富',
					text: ''
				}, {
					bgurl: '/static/wode/vipsmallbg1.png',
					icon: '/static/wode/w-quanyi3.png',
					title: '客服',
					text: ''
				}, {
					bgurl: '/static/wode/vipsmallbg1.png',
					icon: '/static/wode/w-quanyi4.png',
					title: '每日福利',
					text: ''
				}],
				quanyiList2: [{
					bgurl: '/static/wode/vipsmallbg1.png',
					icon: '/static/wode/w-quanyi5.png',
					title: '沟通',
					text: ''
				}, {
					bgurl: '/static/wode/vipsmallbg1.png',
					icon: '/static/wode/w-quanyi6.png',
					title: '搜索',
					text: ''
				}, {
					bgurl: '/static/wode/vipsmallbg1.png',
					icon: '/static/wode/w-quanyi7.png',
					title: '匹配',
					text: ''
				}, {
					bgurl: '/static/wode/vipsmallbg1.png',
					icon: '/static/wode/w-quanyi8.png',
					title: '翻译',
					text: ''
				}, ],
				isVip: '',
				myInfo: [],
				isShowMask: false,
				isShow: false,
				money: '',
				ischeck: false,
				iszhifu: true,
				isweixin: false,
				mobile: '',
				paydata: {}, //订单信息
				vipData: [], //会员信息
				member_level: '',
				vipIsCheck: false, //是否选择套餐
				newMember_level: '', //开通的套餐等级
				duration: '', //选择的套餐的时间
			}
		},
		onShow() {
			this.getUserData()
			this.myInfo = uni.getStorageSync('user_info');
			this.mobile = this.myInfo.mobile
		},
		onLoad() {
			this.platform = uni.getStorageSync('platform')
		},
		methods: {
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
			toTaocan() {
				if (this.platform == 'ios') {
					uni.showToast({
						title: 'ios暂不支持该功能',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '../getVip/getVip'
					})
				}

			},
			getUserData() {
				var me = this;
				var data = {
					user_id: uni.getStorageSync('user_id'),
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						console.log(res, '用户信息')
						if (res.data.data[0].is_member == false) {
							me.isVip = false
							me.getVipList()
						} else {
							me.isVip = true
							me.getVipData()
							me.getVipList()
						}
					}
				})
			},
			getVipList() {
				var me = this
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userMemberLevel',
					actionName: 'query',
					data: {
						platform: 'android'
					},
					successBack: function(res) {
						console.log(res, '会员列表')
						me.taocanList1 = res.data.data
						for (var i = 0; i < me.taocanList1.length; i++) {
							me.taocanList1[i].discount = (me.taocanList1[i].discount * 10).toFixed(1)
							me.taocanList1[i].member_equity = me.taocanList1[i].member_equity.split(',')
							me.taocanList1[i].introduction = me.taocanList1[i].introduction.split(',')
							for (var z = 0; z < me.taocanList1[i].introduction.length; z++) {
								if (z < 4) {
									me.quanyiList1[z].text = me.taocanList1[i].introduction[z]
								} else {
									for (var a = 0; a < me.quanyiList2.length; a++) {
										me.quanyiList2[a].text = me.taocanList1[i].introduction[z]
									}
								}
							}

							for (var j = 0; j < me.taocanList1[i].cardEntityList.length; j++) {
								me.taocanList1[i].cardEntityList[j].select = false
								me.taocanList1[i].cardEntityList[j].discount = (me.taocanList1[i].cardEntityList[j].discount * 10).toFixed(1)
							}
						}
					}
				})
			},
			getVipData() {
				var me = this;
				var data = {
					user_id: uni.getStorageSync('user_id'),
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userMember',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						console.log(res, '会员信息')
						me.vipData = res.data.data[0];
						me.member_level = me.vipData.member_level
						console.log(me.member_level)
					}
				})
			},
			renewVip() { //续费会员
				if (uni.getSystemInfoSync().platform == "ios") {
					uni.showToast({
						title: 'ios暂不支持该功能',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '../getVip/getVip'
					})
				}

			},
			selectVip(index, index1) {

				if (this.taocanList1[index].cardEntityList[index1].select == false) {
					for (var i = 0; i < this.taocanList1.length; i++) {
						for (var j = 0; j < this.taocanList1[i].cardEntityList.length; j++) {
							this.taocanList1[i].cardEntityList[j].select = false
						}
					}
					this.taocanList1[index].cardEntityList[index1].select = true
					this.money = this.taocanList1[index].cardEntityList[index1].discount_amout
					this.newMember_level = this.taocanList1[index].member_level
					this.vipIsCheck = true
					this.duration = this.taocanList1[index].cardEntityList[index1].duration
					console.log(this.duration)
				} else {
					this.taocanList1[index].cardEntityList[index1].select = false
					this.vipIsCheck = false
				}
			},
			closeMask() {
				this.isShow = false;
				this.isShowMask = false;
			},
			check() {
				if (this.ischeck == false) {
					this.ischeck = true;
				} else {
					this.ischeck = false;
				}
			},
			checkZhifu() {
				this.iszhifu = true
				this.isweixin = false
			},
			checkWeixin() {
				this.isweixin = true
				this.iszhifu = false
			},
			openVip(index) {
				this.isShow = true;
				this.isShowMask = true;
			},
			toPay() {
				var me = this;
				var data = {
					member_level: this.newMember_level,
					rcharge_type: 'member',
					user_id: uni.getStorageSync('user_id'),
					amount: this.money,
					source: 'android',
					rcharge_account: this.mobile,
					duration: this.duration
				}
				if (this.iszhifu) {
					this.myAjaxNewPost({ //支付宝订单数据
						model: 'user',
						controllerName: 'pay',
						actionName: 'aliPay',
						data: data,
						successBack: function(res) {
							console.log(res)
							me.paydata = res.data.data
							toString(me.paydata)
							console.log(me.paydata)
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: me.paydata, //微信、支付宝订单数据
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}
					})

				} else if (this.isweixin) {
					this.myAjaxNewPost({ //微信订单数据
						model: 'user',
						controllerName: 'pay',
						actionName: 'wxPay',
						data: data,
						successBack: function(res) {
							console.log(res)
							me.paydata = res.data.data
							console.log(me.paydata)
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: me.paydata, //微信、支付宝订单数据
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}
					})


				}
			},
			toMingxi() {
				uni.navigateTo({
					url: '../mingxi/mingxi?type=member'
				})
			},
		}
	}
</script>

<style scoped>
	.body {
		background: #FFFFFF;
		height: 100%;
		box-sizing: border-box;
	}

	.nobody {
		background: #F5F5F5;
	}

	.background-image {
		width: 100%;
		height: 410upx;
		background-color: white;
	}

	.fixedbox {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.bg {
		height: 410upx;
		width: 100%;
	}

	.head {
		display: flex;
		position: absolute;
		top: 72upx;
		align-items: center;
		justify-content: space-between;
		padding: 0 24upx;
		width: 100%;
		color: #FFFFFF;
		box-sizing: border-box;
	}

	.head_left1 {
		display: flex;
		align-items: center;
		font-size: 32upx;
	}

	.head .head_right1 {
		font-size: 28upx;
	}

	.head_left1 image {
		width: 20upx;
		height: 36upx;
		margin-right: 10upx;
	}

	.card {
		height: 340upx;
		width: 602upx;
		border-radius: 20upx;
		background: #FFFFFF;
		box-shadow: #46CECF 0upx 5upx 29upx 3upx;
		position: absolute;
		left: 74upx;
		top: 155upx;
		color: #999999;
		font-size: 24upx;
		overflow: hidden;
	}

	.card_bg {
		height: 340upx;
		width: 602upx;
		position: absolute;
	}

	.card_img {
		position: relative;
		/* z-index: 10; */
	}

	.card_top {
		display: flex;
		align-items: center;
		/* z-index: 10; */
	}

	.card_top_right {
		display: flex;
		flex-direction: column;
		margin-top: 20upx;
		margin-left: 10upx;
		/* z-index: 10; */
	}

	.card_bottom {
		position: relative;
		text-align: center;
		z-index: 10;
	}

	.information {
		color: #46CECF;
		/* z-index: 10; */
	}

	.renew {
		width: 196upx;
		height: 60upx;
		color: #FFFFFF;
		line-height: 60upx;
		/* text-align: center; */
		background-position-x: -30upx;
		border-radius: 20upx;
		margin: 0 auto;
		margin-top: 24upx;
		z-index: 1100;
		background: #46CECF;
	}


	.headImg {
		width: 128upx;
		height: 128upx;
		border-radius: 50%;
		overflow: hidden;
		margin-top: 70upx;
		margin-left: 25upx;
		z-index: 10;
	}

	.huiyuan {
		width: 66upx;
		height: 66upx;
		position: absolute;
		left: 115upx;
		bottom: 8upx;
		z-index: 10;

	}

	.nickname {
		color: #47CECF;
		font-size: 32upx;
		margin-bottom: 25upx;
		margin-top: 20upx;
		z-index: 10;

	}

	.huiyuanBtn {
		background: #47CECF;
		color: #FFFFFF;
		font-size: 24upx;
		border-radius: 38upx;
		height: 38upx;
		width: 130upx;
		line-height: 38upx;
		text-align: center;
		margin-left: 30upx;
		z-index: 10;

	}

	.huiyuanBtn image {
		height: 38upx;
		width: 130upx;
		z-index: 10;
	}

	.huiyuanbtn2 {
		width: 165upx;
		height: 38upx;
		margin-left: 30upx;
		z-index: 10;

	}



	.mid_title {
		display: flex;
		align-items: center;
		color: #47CECF;
		font-size: 32upx;
		padding: 580upx 24upx 0 24upx;
		box-sizing: border-box;
	}

	.mid_title image {
		width: 45upx;
		height: 45upx;
		margin-right: 10upx;
	}

	.mid_body_list {
		display: flex;
		padding: 0 24upx;
		justify-content: space-between;
		/* flex-wrap: wrap; */
	}

	.mid_body_item {
		width: 160upx;
		height: 184upx;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 10upx;
		overflow: hidden;
		margin-top: 20upx;
		font-size: 18upx;
	}

	.mid_body_item .quanxian_bg {
		width: 160upx;
		height: 184upx;
		position: absolute;
		padding-top: 0;
		z-index: 5;
	}

	.mid_body_item image {
		padding-top: 36upx;
		width: 35upx;
		height: 35upx;
		z-index: 10;
	}

	.mid_body_item text {
		z-index: 10;
	}

	.mid_body_item .mid_body_item_title {
		font-size: 28upx;
		padding: 6upx 0 5upx 0;
		z-index: 10;

	}

	.text1 {
		font-size: 28upx;
		padding-top: 30upx;
		margin-bottom: 10upx;
	}

	.changbtn {
		width: 702upx;
		height: 78upx;
		line-height: 78upx;
		text-align: center;
		position: absolute;
		bottom: 60upx;
		left: 24upx;
		border-radius: 10upx;
		color: #FFFFFF;
		font-size: 32upx;
		background: #46CECF;
	}

	.body_mid2 {
		padding: 510upx 24upx 0 24upx;
	}

	.mid2_title {
		color: #47CECF;
		font-size: 32upx;

	}

	.mid2_item_top {
		display: flex;
		align-items: center;
	}

	.mid2_item {
		height: 345upx;
		width: 702upx;
		overflow: hidden;
		border-radius: 10upx;
		padding-left: 80upx;
		padding-top: 70upx;
		position: relative;
		box-sizing: border-box;
		margin-top: 20upx;
	}

	.money image {
		width: 26upx;
		height: 35upx;
	}

	.money text {
		color: #FFFFFF;
		font-size: 88upx;
	}

	.level {
		position: relative;
	}

	.level image {
		width: 160upx;
		height: 45upx;
	}

	.level text {
		color: #47CECF;
		font-size: 24upx;
		position: absolute;
		left: 54upx;
		top: 6upx;

	}

	.item_right {
		color: #FFFFFF;
		font-size: 28upx;
		display: flex;
		flex-direction: column;
		padding-left: 110upx;
	}

	.mid2_item_bottom text {
		font-size: 24upx;
		color: #FFFFFF;
		padding-top: 50upx;
	}

	.tovip {
		height: 48upx;
		width: 135upx;
		color: #47CECF;
		font-size: 28upx;
		line-height: 48upx;
		text-align: center;
		border-radius: 10upx;
		background: #FFFFFF;
		position: absolute;
		bottom: 20upx;
		right: 40upx;
	}

	/* 支付框 */
	.paybox {
		background: #FFFFFF;
		width: 100%;
		height: 860upx;
		border: 1upx solid #E6E6E6;
		border-radius: 10upx;
		padding: 0 24upx;
		box-sizing: border-box;
		z-index: 10000;
		position: fixed;
		bottom: -90upx;
	}

	.paybox_title {
		text-align: center;
		font-size: 32upx;
		padding: 24upx 0 26upx 0;
		border-bottom: 1upx solid #E6E6E6;
	}

	.paybox_num {
		font-size: 47upx;
		color: #333333;
		text-align: center;
		padding: 30upx 0;
	}

	.paybox_num text {
		font-size: 88upx;
	}

	.pay_mode {
		font-size: 32upx;
		color: #000000;
	}

	.pay_mode_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.pay_mode_title {
		border-bottom: 1upx solid #E6E6E6;
		width: 100%;
		padding-bottom: 20upx;
	}

	.mode_item_left {
		display: flex;
		align-items: center;
		line-height: 88upx;

	}

	.mode_item_left image {
		width: 58upx;
		height: 58upx;
		margin-right: 20upx;
	}

	.mode_item_right {
		width: 40upx;
		height: 40upx;
	}

	.check {
		padding: 30upx 0;
	}

	.check image {
		width: 26upx;
		height: 26upx;
		margin-right: 10upx;
	}

	.check text {
		font-size: 28upx;
		color: #333333;
	}

	.shurepay {
		margin-bottom: 30upx;
	}

	.mask-btn {
		width: 702upx;
		height: 88upx;
		background: rgba(70, 206, 207, .5);
		border-radius: 10upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88upx;
		margin: 0 auto;
		font-size: 32upx;
	}

	/* 未成为vip显示 */
	.vip-item {
		background: #FFFFFF;
		width: 410upx;
		border-radius: 10upx;
		padding: 40upx 24upx;
		margin-right: 20upx;
	}

	.vip-item:nth-child(3) {
		margin-right: 0
	}

	.vip-item-title {
		font-size: 32upx;
		color: #46CECF;
		border-bottom: 1upx solid #E6E6E6;
		padding-bottom: 24upx;
		display: flex;
		align-items: flex-end;
	}

	.vip-item-title2 {
		color: #999999;
		font-size: 18upx;
		padding-left: 12upx;
	}

	.vip-item-title2 text {
		color: #FF0000;
	}

	.priceList {
		display: flex;
		justify-content: space-between;
		padding: 15upx;
		padding-top: 35upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.priceList-left {
		width: 300upx;
		display: flex;
		justify-content: space-between;
	}

	.priceList-left-text1 {
		color: #46CECF;
		font-size: 28upx;
	}

	.priceList-left-text2 {
		color: #999999;
		font-size: 28upx;
	}

	.priceList-left-text3 {
		color: #E6E6E6;
		font-size: 26upx;
		text-decoration: line-through
	}

	.zhekouBox {
		width: 75upx;
		height: 30upx;
		background: #FF2A2A;
		color: #FFFFFF;
		font-size: 20upx;
		border-radius: 10upx;
		text-align: center;
	}

	.selectone {
		width: 30upx;
		height: 30upx;
	}

	.vip-item-bottom {
		display: flex;
		flex-direction: column;
		margin-top: 34upx;
		color: #46CECF;
		font-size: 28upx;
	}

	.vip-item-bottom .bottom-text {
		color: #999999;
		font-size: 18upx;
		margin-top: 10upx;
	}

	.scroll-box {
		padding-top: 20upx;
		/* padding-left: 24upx; */
		/* padding: 0 24upx; */
		box-sizing: border-box;
		margin-bottom: 20upx;
	}

	.padding-scroll-box {
		display: inline-flex;
		overflow-x: scroll;
		white-space: nowrap;
		/* padding: 0  24upx; */
	}

	.btn1 {
		margin-top: 34upx;
		position: absolute;
		bottom: 60upx;
		left: 24upx;
	}

	.noSupport {
		text-align: center;
		font-size: 28upx;
		color: #CCCCCC;
		line-height: 600upx;
	}
</style>
